<template>
  <a-card :bordered="false" :style="{ minHeight: `${layoutContentHeight - pageHeaderHeight - layoutFooterHeight}px` }">
    <!-- table搜索栏 start -->
    <div>
      <span>{{ $t('authenticationCenter.role.roleName') }}：</span
      ><a-input class="search-btn" style="width: 150px" v-model.trim="queryParam.name" :maxLength="16" allowClear />
      <span>{{ $t('common.status') }}：</span
      ><a-select v-model="queryParam.status" allowClear class="search-btn" style="width: 150px">
        <a-select-option value="1">{{ $t('common.inUse') }}</a-select-option>
        <a-select-option value="2">{{ $t('common.disabled') }}</a-select-option>
      </a-select>
      <a-button class="search-btn" type="primary" icon="search" @click="$refs.table.refresh(true)">{{
        $t('common.query')
      }}</a-button>
      <a-button class="search-btn" icon="reload" @click="handleResetQuery">{{ $t('common.reset') }}</a-button>
      <a-button
        class="search-btn"
        v-action:add
        type="primary"
        icon="plus"
        @click="$router.push({ name: 'roleDetail' })"
      >{{ $t('button.add') }}</a-button
      >
    </div>
    <!-- table搜索栏 end -->

    <!-- table start -->
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :alert="false"
      :showPagination="true"
      :pageURI="true"
    >
      <span slot="status" slot-scope="text, record">
        <span>{{ record.status === 1 ? $t('common.inUse') : $t('common.disabled') }}</span>
      </span>
      <span slot="action" slot-scope="text, record" class="actionsList">
        <a v-action:edit @click="$router.push({ name: 'roleDetail', params: { id: record.id } })">{{
          $t('common.edit')
        }}</a>
        <a-divider v-if="record.status === 2" v-action:enable type="vertical" />
        <a-divider v-if="record.status !== 2" v-action:disable type="vertical" />
        <a v-action:enable v-if="record.status === 2" @click="handleEnable(record)">{{ $t('common.enable') }}</a>
        <a-popconfirm
          v-else
          placement="topRight"
          :okText="$t('common.ok')"
          :cancelText="$t('common.cancel')"
          @confirm="handleEnable(record)"
        >
          <template slot="title">
            <p>确定要禁用该角色吗？</p>
          </template>
          <a v-action:disable>{{ $t('common.disable') }}</a>
        </a-popconfirm>
        <a-divider v-action:delete type="vertical" />
        <a-popconfirm
          placement="topRight"
          :okText="$t('common.ok')"
          :cancelText="$t('common.cancel')"
          @confirm="handleDelete(record.id)"
        >
          <template slot="title">
            <p>{{ $t('common.delWarning', { name: $t('authenticationCenter.role.role') }) }}</p>
          </template>
          <a v-action:delete>{{ $t('common.delete') }}</a>
        </a-popconfirm>
      </span>
    </s-table>
    <!-- table end -->
  </a-card>
</template>

<script>
import { layoutMixin } from '@/utils/mixin'
import { STable } from '@/components'
import { getRoleList, updateRoleStatus, deleteRole } from '@/api/authenticationCenter/config/role'

export default {
  name: 'RoleConfig',
  components: {
    STable
  },
  mixins: [layoutMixin],
  data () {
    return {
      initFlag: true,
      // 查询参数
      queryParam: {
        status: '1'
      },
      // 表头
      columns: [
        {
          title: this.$t('authenticationCenter.role.roleName'),
          dataIndex: 'name',
          ellipsis: true
        },
        {
          title: this.$t('common.status'),
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status'
          }
        },
        {
          title: this.$t('common.comment'),
          dataIndex: 'comment',
          scopedSlots: {
            customRender: 'comment'
          },
          ellipsis: true
        },
        {
          title: this.$t('common.action'),
          dataIndex: 'action',
          width: '175px',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: params => {
        const model = this.initFlag ? Object.assign(params, this.queryParam) : Object.assign(this.queryParam, params)
        return getRoleList({
          ...model,
          appId: 0
        }).then(res => {
          this.initFlag = false
          return res.data
        })
      }
    }
  },
  created () {
    const { pageNo } = this.$route.params
    if (pageNo) {
      this.queryParam = {
        ...this.queryParam,
        pageNo
      }
    }
  },
  methods: {
    handleResetQuery () {
      this.queryParam = {
        status: '1'
      }
      this.$refs.table.refresh(true)
    },

    /**
     * 启用/禁用角色
     */
    handleEnable (record) {
      updateRoleStatus({
        id: record.id,
        status: record.status === 1 ? 2 : 1
      }).then(res => {
        this.$message.success(res.message)
        this.$refs.table.refresh()
      })
    },

    /**
     * 删除角色
     */
    handleDelete (id) {
      deleteRole({
        ids: id
      }).then(res => {
        this.$message.success(res.message)
        this.$refs.table.refresh()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.actionsList {
  .ant-divider:first-child {
    display: none;
  }
}
</style>
